<template>

  <a-row :gutter="40"
         class="condition-judge">
    <a-col :span="24">
      <a-row :gutter="40"
             class="condition-business">
        <a-col :span="8">
          <a-select allowClear
                    style="width: 100%;"
                    v-model="valueCopy.filed"
                    notFoundContent="暂无数据"
                    @change="filedChange"
                    placeholder="请选择">
            <a-select-opt-group v-for="group in list"
                                :key="group.groupId"
                                :label="group.groupName">
              <a-select-option v-for="item in group.conditionList"
                               :key="item.value"
                               :value="item.value">{{ item.label }}
              </a-select-option>
            </a-select-opt-group>
          </a-select>
        </a-col>
        <a-col :span="8"
               v-if="valueCopy.type == '1'">
          <a-select style="width: 100%;"
                    v-model="valueCopy.operator"
                    clearable
                    placeholder="请选择条件字段"
                    notFoundContent="暂无数据"
                    @change="operatorChange">
            <a-select-option v-for="item in condition"
                             :key="item.value"
                             :value="item.value">{{ item.label }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="valueCopy.type == '1' ? 8 : 16">
          <component v-if="controlInfo.type"
                     :is="controlInfo.type"
                     :ref="valueCopy.filed"
                     v-bind="controlInfo"
                     v-model="valueCopy.value"
                     class="compont-child"
                     @change="comChange"
                     :input="comInput">
          </component>
        </a-col>
      </a-row>

    </a-col>
  </a-row>
</template>

<script>
import PropTypes from '@zh/common-utils/prop-types'
import { Input } from 'ant-design-vue'
export default {
  name: 'ConditionJudge',
  props: {
    value: PropTypes.object.def({}),
    label: PropTypes.string.def('条件名称').des('单选名称'),
    list: PropTypes.array.def([]).des('数据源'),
    index: PropTypes.string.des('判断条件列表索引')
  },
  components: {
    Input
  },
  data () {
    return {
      valueCopy: {},
      condition: [],
      controlInfo: {}
    }
  },
  watch: {
    value: {
      handler (newValue) {
        this.valueCopy = newValue
        this.attrControlInfo = this.getOptions(newValue.filed)
        this.$nextTick(res => {
          this.handleTranslate(newValue)
        })
      },
      deep: true,
      immediate: true
    },
    // 初始化监听filed变化
    'value.filed': {
      handler (value) {
        if (!value) {
          this.valueCopy.operator = undefined
          this.valueCopy.value = ''
          if (this.valueCopy?.levelCode) {
            delete this.valueCopy.levelCode
          }
        } else {
          this.$emit('verifyInfoFun')
          this.getOperator(value)
        }
        this.emit(this.valueCopy)
      },
      deep: true,
      immediate: true
    },
    'valueCopy.operator': {
      handler (value) {
        this.controlInfo = this.attrControlInfo
        this.condition.map(item => {
          if (item.value == value && item.component) {
            this.controlInfo = { ...this.controlInfo, ...item.component }
          }
        })
        this.$emit('verifyInfoFun')
        this.emit(this.valueCopy)
      },
      deep: true,
      immediate: true
    },
    'valueCopy.value': function (value) {
      this.$emit('verifyInfoFun')
      this.emit(this.valueCopy)
    }
  },

  methods: {
    operatorChange () {
      // 金额不需要赋值
      if (this.condition && this.condition.length > 1) {
        this.valueCopy.value = null
      }
    },
    filedChange (value) {
      this.attrControlInfo = this.getOptions(value)
      this.controlInfo = this.attrControlInfo
      this.valueCopy.operator = undefined
      this.valueCopy.value = ''
      if (this.valueCopy?.levelCode) {
        delete this.valueCopy.levelCode
      }
      this.$emit('verifyInfoFun')
      this.getOperator(value)
    },
    // 通过所选值 获取对应数据
    getOptions (value) {
      for (const group of this.list) {
        for (const condition of group.conditionList) {
          if (condition.value == value) {
            return condition.controlInfo
          }
        }
      }
      return {}
    },
    // 通过业务id类型获取条件
    getOperator (value) {
      // 判断是否是自定义
      if (value == '-1') {
        this.valueCopy.type = '2'
      } else {
        this.valueCopy.type = '1'
        // 通过filed获取condition条件数据
        this.list.map((list) => {
          list.conditionList.map((con) => {
            if (con.value == value) {
              this.valueCopy.dataType = con?.dataType || ''
              this.condition = con.condition
              this.controlInfo = con.controlInfo
            }
          })
        })
      }
    },
    comChange (value, levelCode) {
      if (levelCode) {
        let levelCodeArr = levelCode.filter(item => {
          return item.levelCode
        })
        if (levelCodeArr.length > 0) {
          this.valueCopy.levelCode = levelCodeArr.map(item => {
            return item.levelCode
          })
        }
      }
      this.handleTranslate(this.valueCopy)
      this.$emit('verifyInfoFun')
    },
    comInput () {
      this.$emit('verifyInfoFun')
    },
    emit (value) {
      if (!this.controlInfo?.type) {
        return
      }
      if (this.controlInfo?.type?.includes('yf-select-user') || this.controlInfo?.type?.includes('yf-selectUser')) {
        value.comType = 'user'
      }
      if (this.controlInfo?.type?.includes('yf-select-unit') || this.controlInfo?.type?.includes('yf-selectUnit')) {
        value.comType = 'unit'
      }
      if (this.controlInfo?.type?.includes('yf-select-role') || this.controlInfo?.type?.includes(' yf-selectRole')) {
        value.comType = 'role'
      }

      if (this.index != null) {
        const index = this.index
        this.$emit('input', { value, index })
        this.$emit('change', { value, index })
      } else {
        this.$emit('input', value)
        this.$emit('change', value)
      }
      // 处理翻译
      this.handleTranslate(value)
    },
    // 处理翻译
    handleTranslate (data) {
      // 定义三个数据
      let first, second, last = ''
      for (let i = 0; i < this.list.length; i++) {
        const item = this.list[i]?.conditionList || []
        for (let j = 0; j < item.length; j++) {
          const item1 = item[j]
          if (!data.filed) {
            this.$emit('rowText', `${first || ''} ${second || ''} ${last || ''}`)
          }
          // 数据匹配上了
          if (item1.value == data.filed) {
            // 处理第一个数据
            first = item1.label
            // 处理第二个数据
            if (item1.condition instanceof Array) {
              item1.condition.forEach(condition => {
                if (condition.value == data.operator) {
                  second = condition.label
                  return
                }
              })
            }
            // 处理第三个数据
            const component = this.$refs[data.filed]
            if (component && component.getRawValue instanceof Function) {
              this.$nextTick(() => {
                last = component.getRawValue(data.value)
                this.$emit('rowText', `${first || ''} ${second || ''} ${(last != undefined && last != null) ? last : ''}`)
              })
            } else {
              last = data.value
            }
            this.$emit('rowText', `${first || ''} ${second || ''} ${last || ''}`)
            break
          }
        }
      }
    },
    clear () {
      this.valueCopy = {
        filed: '',
        type: '',
        operator: undefined,
        value: ''
      }
      this.conditionList = []
      this.condition = []
      this.emit(this.valueCopy)
    }
  }
}
</script>

<style lang="less" scoped>
.condition-judge {
  background: #fff;
  .el-a-select {
    width: 100%;
  }
}
.condition-group {
  padding: 10px 0;
  label {
    font-size: var(--font-size-def);
    padding-right: 40px;
  }
}
.condition-business {
  padding: 10px 0;
}
::v-deep .compont-child > .ant-select {
  width: 100% !important;
}
</style>
